<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="styles.css" />
		<title>typesafe-i18n: i18n</title>

		<script src="https://unpkg.com/typesafe-i18n@5.17.0/dist/i18n.instance.min.js"></script>
		<script type="module">
			import date from 'https://unpkg.com/typesafe-i18n@5.17.0/formatters/date.mjs'

			// helper function to render translation in HTML
			const addTexts = (locale, ...texts) => {
				const section = document.createElement('section')
				section.setAttribute('id', locale)
				document.body.append(section)
				const h3 = document.createElement('h3')
				h3.append(locale)
				section.append(h3)

				texts.forEach((text) => {
					const p = document.createElement('p')
					p.append(text)
					section.append(p)
				})
			}

			const localeTranslations = {
				en: { HI: 'Hello {name|uppercase}!', TODAY: 'Today is {0|weekday}', NO_ARGS: 'Text with no arguments' },
				de: { HI: 'Hallo {name|uppercase}!', TODAY: 'Heute ist {0|weekday}', NO_ARGS: 'Text ohne Parameter' },
				it: { HI: 'Ciao {name|uppercase}!', TODAY: 'Oggi è {0|weekday}', NO_ARGS: 'Testo senza parametri' },
			}

			const initFormatters = (locale) => ({
				uppercase: (value) => value.toUpperCase(),
				weekday: date(locale, { weekday: 'long' }),
			})

			const formatters= {
				en: initFormatters('en'),
				de: initFormatters('de'),
				it: initFormatters('it'),
			}

			const L = i18n(localeTranslations, formatters)

			addTexts('en', L.en.HI({ name: 'world' }), L.en.TODAY(new Date()), L.en.NO_ARGS())

			addTexts('de', L.de.HI({ name: 'Welt' }), L.de.TODAY(new Date()), L.de.NO_ARGS())

			addTexts('it', L.it.HI({ name: 'mondo' }), L.it.TODAY(new Date()), L.it.NO_ARGS())
		</script>
	</head>
	<body>
		<a href="/">back</a>
		<h2>typesafe-i18n browser demo: i18n</h2>
	</body>
</html>
